<template>
  <div class="update-photo">
    <img class="img" :src="url" ref="image" name="photo"/>
    <div class="toolbar">
      <div class="cancel" @click="$emit('close')">取消</div>
      <div class="confirm" @click="onConfirm">完成</div>
    </div>
  </div>
</template>
           
<script>
import Cropper from "cropperjs";
import "cropperjs/dist/cropper.css";
 import {editUserprofile_api} from "@/api/article/index";

export default {
  props: ["url"],
  data() {
    return {
      myCropper: null
    };
  },
   mounted() {
    this.init()
  },
  methods: {
    init() {
      this.myCropper = new Cropper(this.$refs.image, {
        viewMode: 1,
        dragMode: "none",
        initialAspectRatio: 1,
        aspectRatio: 1,
        preview: ".before",
        background: false,
        autoCropArea: 0.8,   //裁剪框大小
        zoomOnWheel: true   //图片缩放
      });
    },
     //点击裁切后的确认按钮
      /* 
      1、需要获取被裁切的图片资源====formData
      2、调用插件中的方法 来发送请求
      3、关闭对话框
      */
    onConfirm() {
       this.myCropper.getCroppedCanvas().toBlob(
         async blob=> {
           const fd = new FormData()
           fd.append('photo',blob)
           //发送请求
           const {data:res}= await editUserprofile_api(fd)
           console.log(res,'ffff');
           this.$emit('close')
         }
       )
    }
  }
};
</script>
<style scoped lang="less">
.update-photo {
  background-color: #000;
  height: 100%;
  .toolbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    .cancel,
    .confirm {
      width: 90px;
      height: 90px;
      font-size: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
    }
  }
}
.img {
  display: block;
  max-width: 100%;
}
</style>